import { message } from 'antd';

import MyUpload from '@/components/MyUpload';
import {
  editAbout,
  editSettings, findByAboutInfo,
  findBySettingInfo,
  findBySettingsInfo,
} from '@/services/sys/sys_config';
import ProCard from '@ant-design/pro-card';
import {
  ProForm,
  ProFormColorPicker,
  ProFormItem,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useMount, useRequest } from 'ahooks';
import React, { useEffect, useRef, useState } from 'react';
import BraftEditor, { EditorState } from 'braft-editor';
import './editor.less';
const cloneTbale: React.FC = () => {
  // @ts-ignore
  const formRef = useRef<ProFormInstance>();
  const [form] = ProForm.useForm();
  const [editorState, setEditorState] = useState<EditorState>();
  const {
    data: settingInfo,
    runAsync: fetchBySettingInfo,
    loading,
  } = useRequest(findByAboutInfo, { manual: false });
  const rgbToHex = (r: number, g: number, b: number) => {
    const toHex = (component: number) =>
      component.toString(16).padStart(2, '0');
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  };
  useMount(() => {
    fetchBySettingInfo().then((res) => {
      if (res) {
        setEditorState(BraftEditor.createEditorState(res?.content));
      }
      formRef?.current?.setFieldsValue(res);
    });
  });
  const handleChange = (editorState: { toHTML: () => any }) => {
    let html = editorState.toHTML();
    console.log(html);
    setEditorState(editorState);
  //  setContent(html);
    form.setFieldValue('content', html);
    //   form.setFieldValue('content', html);
  };
  return (
    <ProCard
      title={'系统配件'}
      onLoad={() => {
        findBySettingsInfo().then((res) => {
          formRef?.current?.setFieldsValue(res);
        });
      }}
    >
      <ProForm<API.AboutInfo>
        initialValues={settingInfo}
        formRef={formRef}
        layout={'horizontal'}
        form={form}
        loading={loading}
        labelCol={{ span: 2 }}
        onFinish={(values) => {
          return new Promise((resolve, reject) => {
            editAbout(values)
              .then((res) => {
                resolve(true);
                message.success('操作成功');
              })
              .catch((err) => {
                reject(err);
                message.error('操作失败');
              });
          });
        }}
      >
        <ProFormItem label={'图标'} name={'logoId'}>
          <MyUpload
            id={settingInfo?.logoId}
            url={settingInfo?.logoUrl}
            type={8}
            onChange={(imageId) =>
              formRef?.current?.setFieldValue('logoId', imageId)
            }
          />
        </ProFormItem>
        <ProFormText label={'标题'} width={'md'} name={'name'} />

        <ProFormTextArea label={'备注'} width={'md'} name={'remark'} />

        <ProFormText label={'地址'} width={'md'} name={'name'} />
        <ProFormText label={'联系电话'} width={'md'} name={'phone'} />
        <ProFormText label={'电子邮箱'} width={'md'} name={'email'} />

        <ProFormTextArea label={'内容'} width={'md'} name={'content'} />
        <ProFormItem label={'背景颜色'} name={'backgroundColor'}>
          <BraftEditor
            lineHeights={[1, 2]}
            value={editorState}
            onChange={handleChange}
          />
        </ProFormItem>


      </ProForm>

    </ProCard>
  );
};

export default cloneTbale;
